<script setup>
    import {ref} from "vue";
    import {User, Lock} from "@element-plus/icons-vue";
    import adminApi from "@/api/admin.js";
    import userApi from "@/api/user.js";
    import captchaApi from "@/api/captcha.js";
    import {ElMessage} from "element-plus";
    import {useTokenStore} from "@/store/token.js";
    const tokenStore = useTokenStore()
    import {useRouter} from 'vue-router'
    const router = useRouter()

    const loginDTO = ref({
        'name': '',
        'password': '',
        'captcha': '',
        'uuid': '',
        'role': 1
    })

    const login = () => {
        if (loginDTO.value.role == 1) {
            adminApi.login(loginDTO.value).then(result => {
                console.log(result)
                if (result.code == 0) {
                    //把token保存LocalStorage
                    tokenStore.setToken(result.data)
                    ElMessage.success(result.msg)
                    router.push('/')
                } else {
                    ElMessage.error(result.msg)
                    loadCaptcha()
                }
            })
        } else {
            userApi.login(loginDTO.value).then(result => {
                console.log(result)
                if (result.code == 0) {
                    //把token保存LocalStorage
                    tokenStore.setToken(result.data)
                    ElMessage.success(result.msg)
                    router.push('/userIndex')
                } else {
                    ElMessage.error(result.msg)
                    loadCaptcha()
                }
            })
        }

    }

    const captcha = ref('')
    const loadCaptcha = () => {
        captchaApi.captcha().then(result => {
            if (result.code == 0) {
                captcha.value = result.data.captcha
                loginDTO.value.uuid = result.data.uuid
            }
        })
    }
    loadCaptcha()

</script>

<template>
    <div class="login-bg">
        <!-- 登录表单 -->
        <el-form class="form-login" ref="form" size="large" autocomplete="off" :model="loginDTO" :rules="rules">
            <el-form-item>
                <h1>登录</h1>
            </el-form-item>
            <el-form-item prop="name">
                <el-input :prefix-icon="User" placeholder="请输入用户名" v-model="loginDTO.name"></el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input name="password" :prefix-icon="Lock" type="password" placeholder="请输入密码"
                          v-model="loginDTO.password"></el-input>
            </el-form-item>
            <el-form-item prop="captcha">
                <el-input name="captcha" v-model="loginDTO.captcha" placeholder="验证码" auto-complete="off" prefix-icon="el-icon-refresh"></el-input>
                <img width="160px" :src="captcha" @click="loadCaptcha" alt="验证码"/>
            </el-form-item>
            <el-form-item prop="password">
                <input type="radio" id="admin" value="1" v-model="loginDTO.role" checked/><label for="admin">管理员</label>
                <input type="radio" id="user" value="2" v-model="loginDTO.role" /><label for="user">会员</label>
            </el-form-item>
            <!-- 登录按钮 -->
            <el-form-item>
                <el-button class="button" type="primary" auto-insert-space @click="login">登录</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<style scoped>
    .login-bg {
        height: 100%;
        background-repeat: no-repeat;
        background-position: center;
        background-attachment: fixed;
        background-size: cover;
    }

    .form-login {
        width: 280px;
        padding: 20px;
        position: absolute;
        top: 20%;
        left: calc(50% - 150px);
        background-color: #FFF;
        box-shadow: 10px 10px 30px #000;
    }
</style>